/*
 * @Author: chengsl
 * @Date: 2022-04-18 08:55:03
 * @LastEditors: chengsl
 * @LastEditTime: 2023-04-26 16:52:10
 * @Description: main.js
 */
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import lazyPlugin from 'vue3-lazy'
import * as ElIconModules from '@element-plus/icons-vue'
import VueClipboards from 'vue-clipboards'
import './assets/js/bbt-icon'
import '@/assets/scss/index.scss'

// 自定义指令
import directives from "@/directives/index";

const app = createApp(App)
const vm = app
  .use(store)
  .use(router)
  .use(ElementPlus)
  .use(VueClipboards)
  .use(directives)
  .use(lazyPlugin, {
    loading: require('@/assets/images/holder.png'), // 图片加载时默认图片
    error: require('@/assets/images/holder.png') // 图片加载失败时默认图片
  })
  .mount('#app')

/** *************** 全局定义echarts *************** */
import * as echarts from 'echarts'
import VChart from 'vue-echarts'
import 'echarts/lib/component/tooltip'
app.component('VChart', VChart)
app.config.globalProperties.$echarts = echarts // Vue.prototype.$echarts = echarts

console.log('环境变量 process.env:', process.env);

/** *************** 引入 element-plus 的图标 *******************/
const iconNameList = []
Object.keys(ElIconModules).forEach(function (key) {
  iconNameList.push(ElIconModules[key].name)
  app.component(ElIconModules[key].name, ElIconModules[key])
})
console.log('直接可用的图标有：', iconNameList)

/** *************** 全局组件 *******************/
const componentNameList = []
const components = require.context('@/components', true, /index\.vue$/)
components.keys().forEach((componentPath) => {
  const componentEntity = components(componentPath).default
  if (componentEntity.name) {
    componentNameList.push(componentEntity.name)
    app.component(componentEntity.name, componentEntity)
  }
})
console.log('直接可用的组件有：', componentNameList)

/** ***** 添加原型属性 dayjs 指向 app *****/
import dayjs from 'dayjs'
app.config.globalProperties.$dayjs = dayjs
app.config.globalProperties.$NOWTIME = function () {
	return dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
}

/** *************** 全局统一提示 *************** */
import unifiedTip from '@/utils/unifiedTip'
const { Notification, Message } = unifiedTip
app.config.globalProperties.$message = Message
app.config.globalProperties.$notify = Notification

/** *************** 更新主题色 *************** */
import { updateThemeColor } from '@/utils/updateThemeColor'
app.config.globalProperties.$updateThemeColor = updateThemeColor
if (!document.body.style.getPropertyValue('--theme-color') || document.body.style.getPropertyValue('--theme-color') == 'undefined') {
	updateThemeColor('#14C2C2')
	store.commit('setting/SET_THEME_COLOR', '#14C2C2')
}

/** *************** WebSocket *************** */
const ws = new WebSocket(`ws://${location.hostname}:12138`)
class SocketMessage {
	constructor({
		route,
		message,
		timestamp
	} = {}) {
	this.route = route
	this.message = message
	this.timestamp = timestamp || dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
	}
	toString() {
		return JSON.stringify(this)
	}
}
app.config.globalProperties.$ws = ws
app.config.globalProperties.$SocketMessage = SocketMessage
ws.onopen = () => {
	console.log('WebSocket 初始化完成')
	const socketMessage = new SocketMessage({route: '', message: `WebSocket 初始化完成!`})
	ws.send(socketMessage.toString())
}
ws.onerror = error => {
	console.error('客户端 WebSocket error: ', error)
}

window.VM = vm
